<template>
  <div id="to-detail">
    <div class="bg-color-w">
      <p class="form-title">模块基本信息</p>
      <el-form v-model="Data" :label-position="'right'" label-width="160px">
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="模块编号:">
              <el-input v-model="Data.moduleCode" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :push="2" :span="10">
            <el-form-item label="模块名称:">
              <el-input v-model="Data.moduleName" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="模块状态:">
              <el-input :value="messages.moduleStatus[Data.moduleStatus]" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :push="2" :span="10">
            <el-form-item label="模块描述信息:">
              <el-input v-model="Data.moduleDesc" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="服务类型:">
              <el-input :placeholder="Data.serverType === '' ? '' : (Data.serverType === '01' ? 'HTTP' : 'doubbo服务')" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :push="2" :span="10">
            <el-form-item label="服务地址:">
              <el-input v-model="Data.serverAddress" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="bg-color-w mar-t-10">
      <p class="form-title">模块部署信息</p>
      <el-form v-model="Data" :label-position="'right'" label-width="160px">
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="所属网关环境:">
              <el-input v-model="Data.gwEnvName" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :push="2" :span="10">
            <el-form-item label="所属模块版本号:">
              <el-input v-model="Data.moduleVersion" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="创建时间:">
              <el-input :value="Data.createTime" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :push="2" :span="10">
            <el-form-item label="开放时间:">
              <el-input v-model="Data.onlineTime" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="最后更新时间:">
              <el-input :value="Data.lastedTime" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :push="2" :span="10">
            <el-form-item label="下线时间:">
              <el-input :value="Data.offlineTime" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="bg-color-w mar-t-10">
      <p class="form-title">报文定义-请求参数</p>
      <el-table :data="packetData.reqPacketList">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="fieldCode" label="参数"></el-table-column>
        <el-table-column prop="fieldType" label="类型"></el-table-column>
        <el-table-column label="是否必输">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.fieldRequired" :disabled="true"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="fieldLength" label="长度"></el-table-column>
        <el-table-column prop="fieldName" label="中文名称"></el-table-column>
        <el-table-column prop="fieldDefVal" label="示例值"></el-table-column>
        <el-table-column prop="fieldEncoding" label="编码方式"></el-table-column>
        <el-table-column prop="fieldPattern" label="检查规则"></el-table-column>
      </el-table>
    </div>
    <div class="bg-color-w mar-t-10">
      <p class="form-title">报文定义-响应参数</p>
      <el-table :data="packetData.resPacketList">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="fieldCode" label="参数"></el-table-column>
        <el-table-column prop="fieldType" label="类型"></el-table-column>
        <el-table-column label="是否必输">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.fieldRequired" :disabled="true"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="fieldLength" label="长度"></el-table-column>
        <el-table-column prop="fieldName" label="中文名称"></el-table-column>
        <el-table-column prop="fieldDefVal" label="示例值"></el-table-column>
        <el-table-column prop="fieldEncoding" label="编码方式"></el-table-column>
        <el-table-column prop="fieldPattern" label="检查规则"></el-table-column>
      </el-table>
    </div>
    <div class="bg-color-w mar-t-10">
      <p class="form-title">接口头定义-异常信息</p>
      <el-table :data="errorData.list" ref="table">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="errorCode" label="错误代码"></el-table-column>
        <el-table-column prop="errorDesc" label="描述"></el-table-column>
        <el-table-column prop="errorMsg" label="解决方案"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script type='text/ecmascript-6'>
  import ajax from '../../../../../api/ajax/ajax'
  import api from '../../../../../api/url'
  export default {
    name: 'set-err-msg',
    props: {
      Data: {},
      messages: {}
    },
    watch: {
      Data () {
        this.getInitializeData()
        this.getPacketList()
        this.getListInterfaceLinkError()
      }
    },
    data () {
      return {
        moduleData: {},
        errorData: {},
        packetData: {}
      }
    },
    methods: {
      // 获取报文定义
      getPacketList () {
        ajax.post(api.LISTMODULELINKPACKET, {moduleId: this.Data.moduleId}, true).then(res => {
          this.packetData = res
        }).catch(res => {
          this.$message({
            showClose: true,
            message: res.errorMsg,
            type: 'warning'
          })
        })
      },
      // 获取错误信息列表
      getListInterfaceLinkError () {
        ajax.post(api.LISTMODULELINKERROR, {moduleId: this.Data.moduleId}, true).then(res => {
          this.errorData = res
        }).catch(res => {
          this.$message({
            showClose: true,
            message: res.errorMsg,
            type: 'warning'
          })
        })
      },
      transTime (e, format) {
        switch (format) {
          case 't':
            let date = new Date(e)
            return date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate() + '  ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
        }
      },
      // 获取模块信息
      getInitializeData () {
        this.Data.createTime = this.transTime(this.Data.createTime, 't')
        this.Data.lastedTime = this.transTime(this.Data.lastedTime, 't')
        this.Data.onlineTime = this.transTime(this.Data.onlineTime, 't')
        this.Data.offlineTime = this.transTime(this.Data.offlineTime, 't')
      }
    },
    mounted () {
      this.getInitializeData()
      this.getPacketList()
      this.getListInterfaceLinkError()
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #to-detail
    .bg-color-w
      background-color white
    .mar-t-10
      margin-top 10px
    .form-title
      padding 10px
</style>
